﻿@model QuanLyGiaoVuUI.Models.GiangVienClient.DangKyGioDayGiangVienClientViewModel
@{
    ViewBag.Title = "DangKyGioDay";
    Layout = "~/Views/Shared/_GiangVienClientLayout.cshtml";
}
<style>
    .timetable {
        width: 100%;
        overflow: hidden;
    }

        .timetable table {
            width: 85%;
            margin: 0 auto;
        }

            .timetable table thead tr {
                background-color: green;
                height: 30px;
                line-height: 30px;
                color: yellow;
            }

            .timetable table tbody tr {
                background-color: red;
                height: 80px;
                line-height: 30px;
            }

            .timetable table tbody td {
                width: 150px;
                border: 1px #808080 solid;
            }

                .timetable table tbody td:hover {
                    width: 150px;
                    border: 1px #808080 solid;
                    background-color: yellow;
                }

    .selected, .selected:hover {
        background-color: midnightblue !important;
    }

    .row-title, .row-title:hover {
        background-color: green !important;
        height: 80px;
        line-height: 80px;
        text-align: center;
        border: none !important;
        font-weight: bold;
        color:yellow;
    }
</style>


<div id="gv-main-wrapper">
    @{Html.RenderPartial("GiangVienClientGiangDayMenuPartial");}
    <div id="main" class="grid_10 gvclientmain">
        <!--  start page-heading -->

        <div id="page-heading" class="box round first grid">
            <h2>ĐĂNG KÝ GIỜ GIẢNG DẠY</h2>
            <!-- end page-heading -->

            <div id="gvclientmaincontent" class="block">
                <div style="margin-bottom: 20px">
                    <input type="button" id="btnSave" value="Lưu đăng ký" onclick="SubmitForm()" />
                </div>
                @{using (Ajax.BeginForm("LuuDangKyGioRanh", "GiangVienClient", new AjaxOptions
  {
      HttpMethod = "POST",
      LoadingElementId = "LoadingIcon",
      OnSuccess = "LuuDangKySuccess"
  }, new { id = "LuuDangKyForm" }))
                  {
                    <input type="hidden" id="danhSachDK" name="danhSachDK" value="" />
                  }
                }
                <a href="#" id="LoadingIcon" style="display: none">
                    <img src="~/Images/gif/loading-bar.gif" />
                </a>
                <div class="timetable">
                    <table>
                        <thead>
                            <tr>
                                <th></th>
                                <th>Thứ 2</th>
                                <th>Thứ 3</th>
                                <th>Thứ 4</th>
                                <th>Thứ 5</th>
                                <th>Thứ 6</th>
                                <th>Thứ 7</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="row-title">Sáng
                                </td>
                                <td id="c1"></td>
                                <td id="c3"></td>
                                <td id="c5"></td>
                                <td id="c7"></td>
                                <td id="c9"></td>
                                <td id="c11"></td>
                            </tr>
                            <tr>
                                <td class="row-title">Chiều
                                </td>
                                <td id="c2"></td>
                                <td id="c4"></td>
                                <td id="c6"></td>
                                <td id="c8"></td>
                                <td id="c10"></td>
                                <td id="c12"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                @*<div id="thongtindangkygioday">

</div>*@
                <br />
                <br />
                <div style="margin-bottom: 20px;">∗∗∗<span style="font-size:15px;font-weight:bold;">Ghi Chú</span>∗∗∗</div>
                <table>
                    <tr>
                        <td><div style="width:80px;height:40px;background:midnightblue;"></div></td>
                        <td></td>
                        <td style="padding-left:25px;font-size:15px;font-weight:bold;">Rảnh</td>
                    </tr>
                    <tr>
                        <td colspan="2"><hr /></td>
                    </tr>                    
                   <tr>
                        <td><div style="width:80px;height:40px;background:red;"></div></td>
                        <td></td>
                        <td style="padding-left:25px;font-size:15px;font-weight:bold;">Không Rảnh</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <div class="clear">&nbsp;</div>

</div>



<script>
    $(document).ready(function () {
        $("td").bind("click", function () {
            if ($(this).hasClass("selected")) {
                $(this).removeClass("selected");
            }
            else
                $(this).addClass("selected");
        });

        $("#btnSave").button();

        $.ajax({
            type: "GET",
            url: "/GiangVienClient/LayThongTinDangKyGioRanh",
            success: function LayThongTinGioRanhThanhCong(data) {
                if (data.success == true) {
                    var dataList = data.list;
                    for (var index = 0; index < dataList.length; index++) {
                        var thuTu = dataList[index];
                        $("#c" + thuTu).addClass("selected");
                    }
                }
            }
        });

        $('#thongtindangkygioday').load("/GiangVienClient/LayThongTinDangKyGioDay");
        $('#chondouutien').change(function () {
            var malop = $('#chonlop').val();
            var thu = $('#chonthu').val();
            var maca = $('#chonca').val();
            var douutien = $('#chondouutien').val();
            var isChecked = true;
            $.post("DangKyGioDay", { malopmonhoc: malop, thu: thu, maca: maca, douutien: douutien, isCheckExisted: isChecked }, function (data) {
                if (data.success == true) {
                    //alert("Thành Công!");
                }
                else {
                    alert(data.message);
                }
            });
        });
        $('#dangkygiogiangday').click(function () {
            var malop = $('#chonlop').val();
            var thu = $('#chonthu').val();
            var maca = $('#chonca').val();
            var douutien = $('#chondouutien').val();
            var isChecked = false;
            if (malop == null || malop == "") {
                alert("Bạn chưa được phân công lớp nào!");
                return;
            }
            else {
                $.post("DangKyGioDay", { malopmonhoc: malop, thu: thu, maca: maca, douutien: douutien, isCheckExisted: isChecked }, function (data) {
                    if (data.success == true) {
                        alert(data.message);
                        $('#thongtindangkygioday').load("/GiangVienClient/LayThongTinDangKyGioDay");
                    }
                    else {
                        alert(data.message);
                    }
                });
            }
        });
    });

    function ThongBaoKetQua(data) {
        if (data.success == true) {
            alert("Đăng ký thành công!");
            document.location.reload(true);
        }
        else {
            alert(data.message);
        }
    }

    function SubmitForm() {
        var list = "";
            $("td").each(function () {
                if ($(this).hasClass("selected")) {
                    var id = $(this).attr("id");
                    list = list + "," + id.substr(1, id.length);
                }
            });
            list = list.substr(1, list.length - 1);
            $("#danhSachDK").val(list);
            $("#LuuDangKyForm").submit();
    }

    function LuuDangKySuccess(data) {
        if (data.success == true) {
            ToastManager.showSuccessToast("Lưu thông tin đăng ký thành công.");
        }
        else
            ToastManager.showStickyWarningToast(data.message);
    }
</script>
